<template>
    <div>
        <div>
            <input type="text" placeholder="请输入姓名" v-model="director.name">
            <input type="text" placeholder="请输入性别" v-model="director.gender">
             <input type="text" placeholder="电话号码" v-model="director.phone">
             <button @click="addDirector">增加</button>
        </div>
        <div v-for="item in list" :key="item._id">
            {{item.name}}
         </div>
    </div>
</template>

<script>
        /*
             axios和fetch的不同
             1、axios底层依然是XMLHttpRequest方式，但是fetch的通讯类型是新的类型称为fetch
             2、axios实际上是封装XMLHttpRequest方法，使用的时候必须要下载axios的依赖库，然后才能使用,
             但是fetch是js的原生提供的，不需要导入新的依赖包
             3、发送请求的参数为body，而且还要程序员自己将json对象转成JSON字符串
             总结：fetch和axios比较起来无任何优势，
            */
export default {
    data(){
        return{
            list:[],
            director:{
                name:'',
                gender:'',
                phone:''
            }
        }
    },
    methods:{
       async getDirector(){
           
            // fetch('http://www.zhaijizhe.cn:3005/directors/getDirectors').then(res=>{
            //     return res.json()
            // }).then(res=>{
            //    this.list=res.data.result
            // })
            let result=await fetch('http://www.zhaijizhe.cn:3005/directors/getDirectors').then(res=>res.json())
            this.list=result.data.result
        },
        async addDirector(){
            let result=await fetch('http://www.zhaijizhe.cn:3005/directors/addDirectors',{
                method:'POST',
                headers:{
                    'Content-Type':"application/json"
                },
                body:JSON.stringify(this.director)
            }).then(res=>res.json())
            if(result.code){
                this.getDirector()
            }
        }

    },
    created(){
        this.getDirector()
    }
}
</script>

<style>

</style>